<template>
	<div class="header">
		<div class="left">
			<span class="logo">
			    <i class="iconfont icon-a-logoA" :class="themeName === 'dark'? 'darkIcon' : 'whiteIcon'"></i>
			</span>
			<span class="title">
			    <i class="iconfont icon-shujuguanlipingtaiziti" :class="themeName === 'dark'? 'darkIcon' : 'whiteIcon'"></i>
			</span>
		</div>
		<div class="right">
			<div class="fullScreen" @click="toggle">
				<i class="iconfont icon-fullScreen" :class="!isFullscreen? 'icon-fullScreen' : 'icon-cancel-fullScreen'"></i>
				<span class="name">{{!isFullscreen? '全屏' : '退出全屏'}}</span>
			</div>
			<el-dropdown trigger="click" popper-class="userPopper">
				<div class="userInfo">
					<img :src="userUrl" alt="">
					<span class="username">chenwangshan</span>
					<i class="iconfont icon-arrow-down"></i>
				</div>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item>
						    <el-icon><Moon /></el-icon>
						    <span class="name">深色模式</span>
						    <el-switch v-model="isDark" @change="changeTheme"/>
						</el-dropdown-item>
						<el-dropdown-item @click="handleEditPassword">
						    <el-icon><Edit /></el-icon>
						    <span class="name">修改密码</span>
						</el-dropdown-item>
						<el-dropdown-item @click="handleLogout">
						    <el-icon><SwitchButton /></el-icon>
						    <span class="name">退出登录</span>
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
		<template v-if="dialogPasswordVisible">
		    <el-dialog v-model="dialogPasswordVisible" :show-close="false" width="25%">
    		    <ResetPassword @closeDialog="closeDialog"/>
    		</el-dialog>
		</template>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useFullscreen } from '@vueuse/core';
import { useGlobalStore } from '@/store/modules/global';
import { useUserStore } from '@/store/modules/user';
import { useThemeStore } from '@/store/modules/theme';

import ResetPassword from './c/ResetPassword.vue';

import userUrl from '@/assets/img/user/user.png';

const { isFullscreen, enter, exit, toggle } = useFullscreen();
const globalStore = useGlobalStore();
const userStore = useUserStore();
const themeStore = useThemeStore();

const router = useRouter();

const themeName = computed(() => {
    return globalStore.themeName;
});

const isDark = ref(true);
const dialogPasswordVisible = ref(false);

const changeTheme = (bool) => {
    const name = bool? 'dark' : 'white';
    document.documentElement.className = name;
    globalStore.setThemeName(name);
    themeStore.setTheme(name);
};

// 退出登录
const handleLogout = () => {
    userStore.logout().then(router.push('/login'))
};

// 修改密码
const handleEditPassword = () => {
    dialogPasswordVisible.value = true;
};

// 关闭重置密码框
const closeDialog = () => {
    dialogPasswordVisible.value = false;
};

</script>

<style lang="scss" scoped>
.header {
	@extend .center;
	box-sizing: border-box;
	justify-content: space-between;
	padding: 0px 20px;
	font-size: 13px;
	height: 54px;
	color: var(--eq-font-color);
	background-color: var(--eq-bg-color1);
	border-bottom: 1.5px solid var(--eq-border-color);
	.left {
		@extend .center;
		height: 100%;
		img {
			height: 40px;
		}
		.logo{
		    color: #fff;
		    display: inline-block;
		    margin-right: 15px;
		    i{
		        font-size: 24px;
		    }
		}
		.title{
		    color: #fff;
		    display: flex;
		    i{
		        font-size: 20px;
		    }
		}
		.darkIcon{
		    color: #fff;
		    text-shadow: 0px 0px 4px #50D3ED;
		}
		.whiteIcon{
		    color: #122565;
		    text-shadow: 0px 0px 4px rgba(0,0,0,0.14);
		}
	}
	.right {
		@extend .center;
		.fullScreen {
			@extend .center;
			cursor: pointer;
			.name {
				padding-left: 8px;
			}
			.el-icon{
			    color: var(--eq-font-color);
			    font-size: 16px;
			}
		}
		.userInfo {
			@extend .center;
			margin-left: 20px;
			cursor: pointer;
			color: var(--eq-font-color);
			img {
				width: 20px;
				height: 20px;
			}
			.username {
				padding: 0px 8px;
			}
		}
	}
}
</style>

<style lang='scss'>
.el-dialog__header{
    display: none;
}
.el-dialog__body{
    padding: 0px;
}
.userPopper {
    background-color: var(--eq-bg-color5)!important;
    border: 1.5px solid var(--eq-border-color)!important;
    
    .el-dropdown-menu{
        background-color: var(--eq-bg-color5);
    }
    
    .el-dropdown-menu__item{
        margin: 4px 0px;
        display: flex;
        align-items: center;
        .name{
            padding: 0px 14px 0px 10px;
            color: var(--eq-font-color);
        }
        .el-icon{
            font-size: 14px;
            color: var(--eq-font-color);
        }
        .el-switch__core:after{
            height: 17px;
        }
    }
    .el-dropdown-menu__item:hover{
        .name{
            color: var(--eq-font-hover-color);
        }
        .el-icon{
            color: var(--eq-font-hover-color);
        }
    }
    .popper__arrow{
        top: -7px;
        border-bottom-color: var(--eq-border-color);
    }
    .popper__arrow::after{
        border-bottom-color: var(--eq-bg-color5!important);
    }
    .el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus{
        background-color: var(--eq-bg-color5);
    }
    .el-popper__arrow::before{
        border: 1.5px solid var(--eq-border-color)!important;
        background: var(--eq-bg-color5)!important;
    }
}
</style>